<template>
	<view class="gui-relative" style="height:100vh;">
		<view>
			<view class="gui-box-shadow-md gui-border-box gui-relative gui-padding">
				<image :src="groupcourse.cover_image" mode="widthFix" style="width:100%;will-change: transform;" class="gui-border-radius">
				</image>
			</view>
			<view class="hulu-empty-paragraph"></view>
			<view class="gui-padding gui-flex gui-space-between gui-align-items-center" style="height:156rpx;">
				<view class="">
					<view class="gui-flex gui-justify-content-start gui-align-items-center">
						<u-icon name="bookmark-fill" color="#2979ff" size="32"></u-icon>
						<text class="gui-h6 gui-boldder">{{groupcourse.name}}</text>
					</view>
					<view class="">
						课程价格:
						<text class="gui-color-red2 gui-boldder">{{groupcourse.price}}元</text>
					</view>
				</view>

			</view>
			<view class="hulu-empty-paragraph"></view>
			<view class="gui-padding ">
				<view class="gui-flex gui-justify-content-start gui-align-items-center">
					<u-icon name="tags-fill" color="#2979ff" size="32"></u-icon>
					<text class="gui-h6 gui-boldder">课程信息</text>
				</view>
				<view class="">
					<view class="gui-flex gui-space-between" style="margin-top:10rpx;">
						<view class="gui-flex">
							<text class="gui-text-small ">适用范围:</text>
							<view class="gui-text-small ">
								{{groupcourse.course_type.name}}
							</view>
						</view>
						<view class="gui-flex">
							<text class="gui-text-small ">课卡颜色:</text>
							<view style="width:48rpx;height:32rpx;border-radius: 4rpx;"
								:style="{backgroundColor:groupcourse.color}">
							</view>
						</view>
					</view>
					<view class="gui-flex gui-space-between" style="margin-top:10rpx;">
						<view class="gui-flex">
							<text class="gui-text-small ">卡路里:</text>
							<view class="gui-text-small ">
								{{groupcourse.calorie}}
							</view>
						</view>
						<view class="gui-flex">
							<text class="gui-text-small ">时长:</text>
							<view class="gui-text-small ">
								{{groupcourse.duration}}分钟
							</view>
						</view>
					</view>

					<view class="gui-flex" style="margin-top:10rpx;">
						<text class="gui-text-small ">强度:</text>
						<u-rate v-model="groupcourse.intensity" count="5" readonly activeColor="#ffa502"></u-rate>
					</view>
				</view>

			</view>
			<view class="hulu-empty-paragraph"></view>
			<view class="gui-padding">
				<view class="gui-flex gui-justify-content-start gui-align-items-center">
					<u-icon name="calendar-fill" color="#2979ff" size="32"></u-icon>
					<text class="gui-h6 gui-boldder">课程详情</text>
				</view>
				<view class="gui-padding">
					<rich-text :nodes="groupcourse.introduction"></rich-text>
				</view>
			</view>
			<view class="" style="height: 180rpx;">

			</view>
		</view>
		<view class="pay-btn">
			<view class="pay-btn-warp">
				<up-button @tap="makeOrder" size="large" type="primary" color="linear-gradient(45deg,#52e5e7,#130cb7)"
					shape="circle" text="立即预约">
				</up-button>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app'
	import { onMounted, ref } from 'vue'
	import useGroupcourse from '@/api/groupcourse'
	import request from '@/utils/request'
	const guiPage = ref()

	const { loadGroupcourse, groupcourse } = useGroupcourse()
	const id = ref()
	onLoad((options) => {
		id.value = (+options.id)
	})
	onMounted(async () => {
		await loadGroupcourse(id.value)
	})

	const makeOrder = () => {
		uni.switchTab({
			url: `/pages/appointment/index`
		})
	}
</script>

<style scoped lang="scss">
	.custom-style {
		color: white;
		background-color: red;
	}

	.pay-btn {
		height: 180rpx;
		line-height: 180rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		-webkit-box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);
		-moz-box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);
		box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);

		.pay-btn-warp {
			padding: 0 30rpx;
			width: 700rpx;
		}
	}

</style>